<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <div class="hasRule" v-show="hasRule">
        <el-col class="btnBox">
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="addPunchCardRule"
            v-show="addNewRuleBtn"
          >
            <span class="opetareText">添加新规则</span>
          </el-button>
        </el-col>
        <el-table
          :data="punchCardRuleList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            label="规则名称"
            align="left"
          ></el-table-column>
          <el-table-column prop="pointAddress" label="打卡地点" align="left">
            <template slot-scope="scope">
              {{ scope.row.pointAddress }} -
              <span style="color: #999">{{ scope.row.range }} 米内 </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="200">
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-show="editBtn"
                @click.stop="handleEdit(scope.$index, scope.row)"
                >编辑</el-link
              >
              <el-link
                type="primary"
                v-show="delBtn"
                @click.stop="handleDelete(scope.$index, scope.row)"
                >删除</el-link
              >
              <span v-show="!editBtn && !delBtn">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
        ></Pagination>

        <!-- <el-col class="btnContainer">
         <el-button class="commonBut" @click="goBack">返回</el-button>
        </el-col> -->
      </div>
      <div v-show="!hasRule" class="noRule">
        <img src="../../../static/img/attendance/noHasRule.png" alt="" />
        <p style="margin-bottom: 50px">暂无打卡规则</p>
        <el-col class="btnContainer">
          <el-button class="commonBut saveBtn" @click="addPunchCardRule"
            >添加打卡规则</el-button
          >
          <el-button class="commonBut" @click="goBack">返回</el-button>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'punchCardRuleList',
  data() {
    return {
      titleText: '打卡规则设置',
      back: true,
      requestUrl: 'api-att/nc/attrule/expand/attrulelist',
      // filterField: {},
      punchCardRuleList: [],
      // isShowPagination: false,
      hasRule: true,
      loading: true,
      isShow: false,
      editBtn: false, //编辑按钮
      delBtn: false, //删除按钮
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    //权限按钮显示 编辑(qyAtt:update)、删除(qyAtt:delete)、添加(qyAtt:add)
    this.addNewRuleBtn =
      this.$store.state.buttonLimitsArr.indexOf('qyAtt:add') > -1
    this.editBtn =
      this.$store.state.buttonLimitsArr.indexOf('qyAtt:update') > -1
    this.delBtn = this.$store.state.buttonLimitsArr.indexOf('qyAtt:delete') > -1
  },
  methods: {
    getTableList(data) {
      this.punchCardRuleList = data
      this.hasRule = this.punchCardRuleList.length > 0 ? true : false
      this.loading = false
    },
    //编辑
    handleEdit(index, row) {
      this.$router.push({
        path: '/home/attendance/addPunchCardRule',
        name: 'addPunchCardRule',
        query: {
          id: row.id,
          name: row.name,
          type: 'edit',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/attendance/qyAttendance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //删除
    handleDelete(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.toDel(row.id)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    toDel(id) {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attrule/expand/deleterule',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    addPunchCardRule() {
      this.$router.push('/home/attendance/addPunchCardRule')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/attendance/qyAttendance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      this.$router.push('/home/attendance/qyAttendance')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/attendance/qyAttendance',
        newUrl: this.$router.currentRoute.fullPath,
      })
      // this.$router.push("/home/attendance/qyAttendance");
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  height: calc(100% - 67px);
}
.btnContainer {
  text-align: center;
  margin: 10px 0;
}

.btnBox {
  margin-bottom: 24px;
}

.noRule {
  text-align: center;
  img {
    margin: 60px 0;
  }
}

.noTitleExplain {
  top: 198px;
  padding: 24px;
}
</style>
